<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type="text/javascript" src="../js/prototype.js"></script>
    <script type="text/javascript" src="../js/mapstraction.js"></script>
    <script type="text/javascript" src="../js/ObjTree.js"></script>
    <script type="text/javascript" src="../js/tools4gps.js"></script>
</head>
<body>
<form id="form1">
  <div class="twocolumn">
  filterRadius 
  <select id="filterRadius" size="1">
    <option>0 (sin filter)</option>
    <option selected>2 (por defecto)</option>
    <option>4</option>
  </select><br/>
  stoppedDist 
  <select id="stoppedDist" size="1">
    <option selected>0.001 (1 m, por defecto)</option>
    <option>0.002 (2 m)</option>
    <option>0.003 (3 m)</option>
  </select>
  </div>
  <div class="twocolumn">
  stoppedVel 
  <select id="stoppedVel" size="1">
    <option>0.25 Km/h</option>
    <option selected>0.50 Km/h (por defecto)</option>
    <option>1.00 Km/h</option>
  </select><br/>
  minSlope 
  <select id="minSlope" size="1">
    <option>0.02 (2%)</option>
    <option selected>0.05 (5%) (por defecto)</option>
    <option>0.10 (10%)</option>
  </select>
  </div>
  <input type="button" id="apply" value="Aplicar">
</form>
<div id="report1" class="report">
  <div class="twocolumn">
    <dl>
      <dt>Distancia</dt><dd class='totDist'> Km</dd>
      <dt>Altura máxima</dt><dd class='maxElev'> m</dd>
      <dt>Desnivel subida</dt><dd class='elevGain'> m</dd>
      <dt>Velocidad media</dt><dd class='avgVel'> Km/h</dd>
      <dt>Tiempo total</dt><dd class='totTime'> h</dd>
      <dt>Tiempo movimiento</dt><dd class='totTimeMove'> h</dd>
      <dt>Tiempo llaneando</dt><dd class='totTimeFlat'> h</dd>
    </dl>
  </div>
  <div class="twocolumn">
    <dl>
      <dt>Distacia 3D</dt><dd class='totDist3d'> Km</dd>
      <dt>Altura máxima</dt><dd class='minElev'> m</dd>
      <dt>Desnivel bajada</dt><dd class='elevLoss'> m</dd>
      <dt>Velocidad máxima</dt><dd class='maxVel'> Km/h</dd>
      <dt>Tiempo detenido</dt><dd class='totTimeStop'> h</dd>
      <dt>Tiempo subiendo</dt><dd class='totTimeUp'> h</dd>
      <dt>Tiempo bajando</dt><dd class='totTimeDown'> h</dd>
    </dl>
  </div>
</div>

<script type="text/javascript">
    GPS.setI18N('es');
    var parser = new GPS.Parser("gpsdata/070121_itobal-lascuevas.gpx");
    parser.run(function (gpsData) {
        var report1 = new GPS.Report("report1", gpsData);
        $("apply").observe('click', function() {
            report1.setOptions({
                'filterRadius': parseInt($F('filterRadius')),
                'stoppedDist': parseFloat($F('stoppedDist')),
                'stoppedVel': parseFloat($F('stoppedVel')),
                'minSlope': parseFloat($F('minSlope'))
            });
            report1.draw();
        });
    });    
</script>
</body>
</html>

